<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>dir() selector</title>
  <style>
   :dir(ltr) { color: blue }
   :dir(rtl) { color: lime }
   div { text-align: left; }
  </style>
  <script type="text/javascript">
function AppendElementWithChild() {
    var x = document.createElement("span");
    x.innerHTML = "This span should inherit rtl from the parent. ";

    var y = document.createElement("span");
    y.innerHTML = "This span should inherit rtl from the grandparent.";

    var z = document.getElementById("z");

    x.appendChild(y);
    z.appendChild(x);
}
  </script>
 </head>
 <body onload="AppendElementWithChild()">
  <div id="z" dir="rtl">This element is rtl. </div>
 </body>
</html>
